<template>
	<div class="page_video_view">
		<div class="page_video_view_play">
			<iframe :height="videoheight" :width="videowidth" :src="'http://player.youku.com/embed/'+videoid" frameborder=0 allowfullscreen></iframe>
		</div>
		<div class="page_video_view_desc">
			<h1>{{video.title}}</h1>
			<p>{{video.subTitle}}</p>
		</div>
	</div>
</template>
<script>
	import Axios from "axios";
	import qs from "Qs";
	export default{
		name: "videoview",
		data: function(){
			return{
				videoid:'',
				videoheight:400,
				videowidth:500,
				video:{

				}
			}
		},
		mounted:function(){
			const that = this;
			this.$emit("setDataObject", {type:"videos", title:"视频", showTip:false});
			this.$set(this, "videoid", this.$route.params.id)
			this.$set(this, "videowidth", screen.width)
			this.getVideos(this.$route.params.id)
		},
		methods:{
			getVideos(v){
				const that = this;
				Axios.post(this.$store.state.api.getVideoInfo, qs.stringify({
					id: v
				})).then((res) => {
					console.log(res)
					if (res.data.status === 1){
						that.$set(that, "video", res.data.data)
					}else{

					}
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.page_video_view{
		margin:70/@base 0 0;
		padding:0 0 70/@base 0;
		.page_video_view_play{
			padding:0 20/@base;
			background-color: #000;
			iframe{
				width:100%;
				height:400/@base;
			}
		}
		.page_video_view_desc{
			padding:20/@base;
			font-size: 20/@base;
			h1{
				font-size: 20/@base;
				padding:0 0 10/@base 0;
			}
		}
	}
</style>